<template>
    <div class="tabbar">
      <span :style="{color:currentIndex==index?'blue':'black'}" @click="handleClick(index)" v-for="(item,index) in arr" :key="index">{{item}}</span>
    </div>
  </template>
  
  <script>
  export default {
    name:'Tabber',
      data(){
          return{
              currentIndex:'',
              arr:['首页','订单','我的']
          }
      },
      methods:{
          handleClick(index){
              this.currentIndex = index;
          }
      }
  }
  </script>
  
  <style lang="scss" scoped>
      .tabbar{
          display: flex;
          width: 100%;
          height:60px;
          position: fixed;
          bottom:0;
          border-top: 1px solid black;
          text-align: center;
          line-height: 60px;
          font-size: 20px;
          background: rgba(244, 243, 243, 0.923);
      }
      .tabbar span{
          flex: 1;
      }
  </style>